모던 자바스크립트 Deep Dive JavaScript : 콜백함수의 활용 콜백함수 부분을 공부하다가 주로 어떤 부분에 활용되는지 궁금하여 해당 내용을 간단히 정리 해봄 함수의 매개변수를 통해 다른 함수 내부로 전달되는 함수 매개 변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수는 고차 함수라고 한다. 콜백 함수는 이벤트 처리, 타이머 함수 등을 포함한 비동기 처리 및 배열 고차 함수에 활용된다. 학창시절 WIN API를 접했을 때 윈도우의 메시지 핸들러 함수... 모던 자바스크립트 Deep DiveWeCodeJavaScriptTILJavaScript 모던 자바스크립트 Deep Dive | 스코프 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 스코프 전역 스코프 지역 스코프 지역 변수 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다. 이를 통해 상위 스코프에서 선언한 변수를 하위 스코프에서도 참조할 수 있다. 스코프... 모던 자바스크립트 Deep Dive스코프JavaScriptJavaScript 모던 자바스크립트 Deep Dive | 객체 리터럴 객체의 상태를 나타내는 값(프로퍼티)과 프로퍼티를 참조하고 조작할 수 있는 동작(메서드)을 모두 포함할 수 있기 때문에 상태(데이터)와 동작(메서드)을 하나의 단위로 구조화할 수 있어 유용하다. 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 자바스크립트의 함수는 일급 객체 이므로 값이 될 수 있으며 일급 객체인 함수 또한 프로퍼티 값으로 사용할 수 있다. 프로퍼티 값... JavaScript모던 자바스크립트 Deep DiveJavaScript 모던 자바스크립트 Deep Dive | 원시 값과 객체의 비교 원시 타입의 값, 즉 원시 값은 변경 불가능한 값(immutable value)이고 객체(참조)타입의 값. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 이에 비해 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 원본의 원시 값이 복사되어 전달 원시 타... JavaScript모던 자바스크립트 Deep DiveJavaScript 45장 프로미스 즉, 비동기 처리 결과에 대한 후속 처리를 수행하는 콜백 함수를 비동기 함수에 전달해야 한다. 처리 결과에 대한 후속 처리를 수행하는 비동기 함수가 또다시 비동기 함수를 호출해야 한다면, 콜백 함수 호출이 중첩되어 복잡도가 높아지는 현상이 발생한다. ES6에서는 프로미스(Promise) 를 도입해, 전통적인 콜백 패턴이 가진 단점을 보완하고 비동기 처리 시점을 보다 명확하게 표현할 수 있다.... 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive 모던 자바스크립트 Deep Dive 6장 데이터 타입 데이터 타입(줄여서 '타입'이라고도 한다)은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖는다. 7개의 데이터 타입은 원시 타입과 객체타입으로 분류할 수 있다. 데이터 타입 원시 타입 숫자(number) 타입 문자열(string) 타입 불리언(boolean) 타입 undefined 타입 null 타입 심벌(symbol) 타입 ES6에서 추가된 7번째 타입 숫자 타입 즉, 모... 데이터 타입모던 자바스크립트 Deep Dive데이터 타입 17장 생성자 함수에 의한 객체 생성 하지만 이 외에도 객체를 생성할 수 있는 다양한 방법들이 있는데 이번 포스팅에서는 '생성자 함수'에 의한 객체 생성 방법을 알아보자. Object 생성자 함수 생성자 함수란 new 연산자와 함께 호출하여 객체를 생성하는 함수를 말한다. 이때 생성자 함수에 의해 생성된 객체를 인스턴스라 한다. 그럼 간편하게 객체 리터럴를 통해 객체를 생성하면 되는데 왜 생성자 함수를 사용하는 걸까? 생성자 함... 모던 자바스크립트 Deep Dive대학생프론트엔드개발자객체생성자 함수개발자 모던 자바스크립트 Deep Dive | 변수 즉, 변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. 따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 값에 안전하게 접근할 수 있다 메모리(Memory)는 데이터를 저장할 수 있는 메모리 셀의 집합체이다. 어떠한 값을 재사용하고자 할 때, 변수가 없다면 메모리에 저장된 데... 모던 자바스크립트 Deep Dive호이스팅JavaScriptJavaScript 14장 전역 변수의 문제점 즉, 변수는 생성되고 소멸되는 생명 주기(life cycle)가 있다. 지역 변수의 생명 주기 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다. 즉, 지역 변수의 생명주기는 함수의 생명 주기와 일치한다. foo 함수 내부에서 선언된 지역 변수 x는 foo가 호출될 시점에 이미 선언되었고 undefined로 초기화되어 있다. 전역 변수의 호이스팅은 전역 변수... 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive 📌 09장 타입 변환과 단축 평가 반면 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동변환되기도 하는데 이를 암묵적 타입 변환 또는 타입 강제 변환이라 한다. 9.2.1 문자열 타입으로 변환 자바스크립트 엔진은 부울리언 타입이 아닌 값을 Truthy 값 또는 Falsy 값으로 구분해 각각 true와 false로 암묵적 타입 변환 한다. 개발자의 의도에 따라 명시적으로 타입을... 9.3 명시적 타입 변환모던 자바스크립트 Deep Dive9.1 타입 변환이란?9.4 단축 평가9.2 암묵적 타입 변환9.1 타입 변환이란? 모던 자바스크립트 Deep Dive - 벤더 프리픽스 해당 게시물은 poiemaweb 사이트를 참고 및 인용 하였음을 알려드립니다. 정보 출처: CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스(Vendor Prefix)를 사용하여야 한다. 에서 제공하는 브라우저별 CSS 지원 정보를 보면 텍스트와 요소의 선택을 방지하는 user-select 프로퍼티는 모든 브라우저에 벤더 프리픽... 공부모던 자바스크립트 Deep Dive공부 모던 자바스크립트 Deep Dive #2 변수 이름 : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름 식별자 : 변수 이름을 포함하여 어떤 값을 구별해서 식별할 수 있는 고유한 이름 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다. 변수 선언과 할당을 하나의 문으로 단축 표현할 수 있다 var 키워드로 선언한 변수는 값을 재할당할 수 있다. ... 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive
JavaScript : 콜백함수의 활용 콜백함수 부분을 공부하다가 주로 어떤 부분에 활용되는지 궁금하여 해당 내용을 간단히 정리 해봄 함수의 매개변수를 통해 다른 함수 내부로 전달되는 함수 매개 변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수는 고차 함수라고 한다. 콜백 함수는 이벤트 처리, 타이머 함수 등을 포함한 비동기 처리 및 배열 고차 함수에 활용된다. 학창시절 WIN API를 접했을 때 윈도우의 메시지 핸들러 함수... 모던 자바스크립트 Deep DiveWeCodeJavaScriptTILJavaScript 모던 자바스크립트 Deep Dive | 스코프 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 스코프 전역 스코프 지역 스코프 지역 변수 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다. 이를 통해 상위 스코프에서 선언한 변수를 하위 스코프에서도 참조할 수 있다. 스코프... 모던 자바스크립트 Deep Dive스코프JavaScriptJavaScript 모던 자바스크립트 Deep Dive | 객체 리터럴 객체의 상태를 나타내는 값(프로퍼티)과 프로퍼티를 참조하고 조작할 수 있는 동작(메서드)을 모두 포함할 수 있기 때문에 상태(데이터)와 동작(메서드)을 하나의 단위로 구조화할 수 있어 유용하다. 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 자바스크립트의 함수는 일급 객체 이므로 값이 될 수 있으며 일급 객체인 함수 또한 프로퍼티 값으로 사용할 수 있다. 프로퍼티 값... JavaScript모던 자바스크립트 Deep DiveJavaScript 모던 자바스크립트 Deep Dive | 원시 값과 객체의 비교 원시 타입의 값, 즉 원시 값은 변경 불가능한 값(immutable value)이고 객체(참조)타입의 값. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 이에 비해 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 원본의 원시 값이 복사되어 전달 원시 타... JavaScript모던 자바스크립트 Deep DiveJavaScript 45장 프로미스 즉, 비동기 처리 결과에 대한 후속 처리를 수행하는 콜백 함수를 비동기 함수에 전달해야 한다. 처리 결과에 대한 후속 처리를 수행하는 비동기 함수가 또다시 비동기 함수를 호출해야 한다면, 콜백 함수 호출이 중첩되어 복잡도가 높아지는 현상이 발생한다. ES6에서는 프로미스(Promise) 를 도입해, 전통적인 콜백 패턴이 가진 단점을 보완하고 비동기 처리 시점을 보다 명확하게 표현할 수 있다.... 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive 모던 자바스크립트 Deep Dive 6장 데이터 타입 데이터 타입(줄여서 '타입'이라고도 한다)은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖는다. 7개의 데이터 타입은 원시 타입과 객체타입으로 분류할 수 있다. 데이터 타입 원시 타입 숫자(number) 타입 문자열(string) 타입 불리언(boolean) 타입 undefined 타입 null 타입 심벌(symbol) 타입 ES6에서 추가된 7번째 타입 숫자 타입 즉, 모... 데이터 타입모던 자바스크립트 Deep Dive데이터 타입 17장 생성자 함수에 의한 객체 생성 하지만 이 외에도 객체를 생성할 수 있는 다양한 방법들이 있는데 이번 포스팅에서는 '생성자 함수'에 의한 객체 생성 방법을 알아보자. Object 생성자 함수 생성자 함수란 new 연산자와 함께 호출하여 객체를 생성하는 함수를 말한다. 이때 생성자 함수에 의해 생성된 객체를 인스턴스라 한다. 그럼 간편하게 객체 리터럴를 통해 객체를 생성하면 되는데 왜 생성자 함수를 사용하는 걸까? 생성자 함... 모던 자바스크립트 Deep Dive대학생프론트엔드개발자객체생성자 함수개발자 모던 자바스크립트 Deep Dive | 변수 즉, 변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. 따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 값에 안전하게 접근할 수 있다 메모리(Memory)는 데이터를 저장할 수 있는 메모리 셀의 집합체이다. 어떠한 값을 재사용하고자 할 때, 변수가 없다면 메모리에 저장된 데... 모던 자바스크립트 Deep Dive호이스팅JavaScriptJavaScript 14장 전역 변수의 문제점 즉, 변수는 생성되고 소멸되는 생명 주기(life cycle)가 있다. 지역 변수의 생명 주기 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다. 즉, 지역 변수의 생명주기는 함수의 생명 주기와 일치한다. foo 함수 내부에서 선언된 지역 변수 x는 foo가 호출될 시점에 이미 선언되었고 undefined로 초기화되어 있다. 전역 변수의 호이스팅은 전역 변수... 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive 📌 09장 타입 변환과 단축 평가 반면 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동변환되기도 하는데 이를 암묵적 타입 변환 또는 타입 강제 변환이라 한다. 9.2.1 문자열 타입으로 변환 자바스크립트 엔진은 부울리언 타입이 아닌 값을 Truthy 값 또는 Falsy 값으로 구분해 각각 true와 false로 암묵적 타입 변환 한다. 개발자의 의도에 따라 명시적으로 타입을... 9.3 명시적 타입 변환모던 자바스크립트 Deep Dive9.1 타입 변환이란?9.4 단축 평가9.2 암묵적 타입 변환9.1 타입 변환이란? 모던 자바스크립트 Deep Dive - 벤더 프리픽스 해당 게시물은 poiemaweb 사이트를 참고 및 인용 하였음을 알려드립니다. 정보 출처: CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스(Vendor Prefix)를 사용하여야 한다. 에서 제공하는 브라우저별 CSS 지원 정보를 보면 텍스트와 요소의 선택을 방지하는 user-select 프로퍼티는 모든 브라우저에 벤더 프리픽... 공부모던 자바스크립트 Deep Dive공부 모던 자바스크립트 Deep Dive #2 변수 이름 : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름 식별자 : 변수 이름을 포함하여 어떤 값을 구별해서 식별할 수 있는 고유한 이름 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다. 변수 선언과 할당을 하나의 문으로 단축 표현할 수 있다 var 키워드로 선언한 변수는 값을 재할당할 수 있다. ... 모던 자바스크립트 Deep Dive모던 자바스크립트 Deep Dive